<template>
  <div class="ex-common-class" style="background-color: #e6eeec;padding: 10px 0 60px 0;margin-top: 60px;">
    <h2>优质案例</h2>
    <div class="flex-row" v-for="(item, index) in ecData" :key="index" style="margin-top: 50px;">
      <div class="flex-all" style="margin-left: 50px;margin-right: -30px;">
        <div :class="{'echome-validate-err': errors.has('title_' + index)}">
          <el-input
            v-validate="'required|max:80'" :data-vv-name="'title_' + index"
            placeholder="优质案例名称（不超80字）"
            v-model="item.title"
            clearable>
          </el-input>
        </div>
        <div :class="{'echome-validate-err': errors.has('content_' + index)}">
          <el-input
            v-validate="'required|max:500'" :data-vv-name="'content_' + index"
            style="margin-top: 15px;"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 10}"
            placeholder="优质案例介绍（不超500字）"
            v-model="item.content"
            clearable>
          </el-input>
        </div>
      </div>
      <div class="">
        <i class="el-icon-delete delete-row-icon" @click="deleteItem(item, index)"></i>
      </div>
    </div>
    <div class="add-pd" @click="addItem()">
      <i class="el-icon-plus"></i>
      <span>添加</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "quality-case",
  title: "优质案例",
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      ecData: []
    }
  },
  mounted () {
    this.ecData = this.value
  },
  methods: {
    addItem () {
      this.ecData.push({ title: '', content: ''})
    },
    deleteItem (item, index) {
      this.ecData.splice(index, 1)
    },
    validate () {
      return this.$validator.validateAll()
    }
  },
  watch: {
    'ecData': {
      handler: function () {
        this.$emit('input', this.ecData)
      }
    },
    'value' () {
      this.ecData = this.value
    }
  }
}
</script>

<style>
  .add-pd {
    border: 1px dashed #94C05A;
    text-align: center;
    color: #94C05A;
    font-size: 18px;
    margin-top: 30px!important;
    padding: 6px;
    cursor: pointer;
  }
  .pd-image {
    width: 300px;
  }
  .pd-image .el-upload--picture-card {
    width: 300px;
  }
  .pd-image .el-upload-list--picture-card .el-upload-list__item {
    width: 300px;
  }
</style>
